<template>
    <view class="mapPage">
        <view class="titleBox">
            <view class="segmentedBox">
                <view v-for="(item,index) in flootList" :key="index" :class="current==item.value? 'active' : ''" @click="changeCurrent(item.value)">
                    {{item.label}}
                </view>
            </view>
            <view class="bottom-view">
                <u-search v-model='searchValue' :showAction="true" actionText="搜索" :animation="true" @change='changeSearchValue'></u-search>
                <scroll-view scroll-x class="scroll-view">
                    <view :title="item.name" v-for="(item,index) in tapBox" :key="index" type="line" padding>
                        <view v-if="index==current" style="display: flex;">
                            <view class="tapItemBox" v-for="(floor,indexItem) in item" :key="indexItem">
                                <view v-for="(tab,indextab) in floor.childList" :key="indextab">
                                    <view v-if="tab.name.includes(searchValue)" :class="highlight==tab.name? 'tabNameActive' : ''" class="tapItem" @click="clicktab(tab)">
                                        <view :class="tab.icon" class="iconfont"></view>
                                        <!-- <view class="iconfont t-icon-yj" /> -->
                                        <!-- {{tab.name.includes(searchValue)}} -->
                                        <!-- <view>{{searchValue}}</view> -->
                                        <view class="name">{{tab.name}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <!-- <view @tap="tap2(3)" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
                点击这里放大3倍
            </view>
            <view @tap="tap2(2)" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
                点击这里放大2倍
            </view> -->
        </view>
        <view class="mapBox">
            <movable-area scale-area>
                <movable-view direction="all" @scale="onScale" @change="onChange" :x="x" :y="y" :scale='true' scale-min="0.5" scale-max="2" inertia
                    :scale-value="scale">
                    <view class="mapImgBpx" @tap='handleTap'>
                        <view class="masking" v-if="highlight"></view>
                        <view v-if="current==0">
                            <image style="top:0;left:0;width:100%;height:100%; z-index: 0;"
                                src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/firstFloorImg.jpg'></image>
                            <view v-if="highlight=='电梯'">
                                <image style="top:41.265%;left:30.8%;width:2.8%;height: 3.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti1.png'></image>
                                <image style="top:41.26%;left: 33.7%;width:2.8%;height:3.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti1.png'></image>
                                <image style="top:48.2%;left:30.35%;width:2.80%;height:1.93%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti2.png'></image>
                                <image style="top:48.2%;left: 33.35%;width:2.80%;height:1.93%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti2.png'></image>
                                <image style="top:17.2%;left:54.7%;width: 2.2%;height:1.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti3.png'></image>
                                <image style="top:19.5%;left:54.7%;width: 2.3%;height:1.83%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dianti3.png'></image>
                            </view>
                            <view v-if="highlight=='步梯'">
                                <image style="top:52%;left:32.4%;width:3.4%;height: 5.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/buti1.png'></image>
                                <image style="top:18.26%;left:65.7%;width:3.2%;height: 4.9%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/buti2.png'></image>
                                <image style="top: 35.1%;left:30.15%;width:6.7%;height:3.93%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/buti3.png'></image>
                                <image style="top:78.45%;left:38.1%;width: 6.85%;height:3.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/buti4.png'></image>
                                <image style="top:33.2%;left:57.8%;width: 8.3%;height:5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/buti5.png'></image>
                            </view>
                            <view v-if="highlight=='潮汐'">
                                <image style="top:65.5%;left:31.22%;width:2.1%;height: 2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/chaoxi1.png'></image>
                                <image style="top:65.5%;left: 33.22%;width:2.1%;height:2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/chaoxi2.png'></image>
                            </view>
                            <view v-if="highlight=='数据要素综合服务'">
                                <image style="top:68.3%;left:42.6%;width: 2.2%;height:2.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/sjyszhfw1.png'></image>
                                <image style="top:70.7%;left:42.6%;width: 2.2%;height:2.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/sjyszhfw2.png'></image>
                                <image style="top: 73.2%;left:42.6%;width:2.2%;height:2.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/sjyszhfw1.png'></image>
                                <image style="top:75.59%;left:42.6%;width: 2.2%;height:2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/sjyszhfw3.png'></image>
                            </view>
                            <view v-if="highlight=='卫生间'">
                                <image style="top:62.9%;left:20.5%;width:3.1%;height: 3.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/weishengjian.png'></image>
                                <image style="top:40.6%;left:36.8%;width: 3.1%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/weishengjian1.png'></image>
                                <image style="top:38.15%;left:33.6%;width: 3.2%;height:2.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/weishengjian2.png'></image>
                            </view>
                            <view v-if="highlight=='24小时自助服务'">
                                <image style="top:68.4%;left:48.2%;width:10.75%;height: 15.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/24hourzizhu.png'></image>
                            </view>
                            <view v-if="highlight=='不动产'">
                                <image style="top:65.6%;left:29.4%;width:2%;height: 2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/bdc.png'></image>
                            </view>
                            <view v-if="highlight=='科技综合服务'">
                                <image style="top:65.5%;left:42.75%;width:2%;height: 2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kjzhfw.png'></image>
                            </view>
                            <view v-if="highlight=='诚信建设投诉'">
                                <image style="top:25.5%;left:27.4%;width: 1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/cxjdts.png'></image>
                            </view>
                            <view v-if="highlight=='空调机房'">
                                <image style="top:50.8%;left:28.7%;width:3.7%;height: 6.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kongtiao.png'></image>
                                <image style="top:16.5%;left:57.1%;width:6.4%;height: 7.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kongtiao2.png'></image>
                            </view>
                            <view v-if="highlight=='更衣休息室'">
                                <image style="top:20.1%;left:27.8%;width: 3.9%;height:4.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/gengyi.png'></image>
                                <image style="top:67.1%;left:15.2%;width:8.1%;height: 3.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/gengyi2.png'></image>
                            </view>
                            <view v-if="highlight=='咖啡区'">
                                <image style="top:71.2%;left:16.8%;width:11.2%;height:12.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kafei1.png'></image>
                                <image style="ttop:41.7%;left: 74.5%;width:9.2%;height:9.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kafei2.png'></image>
                            </view>
                            <view v-if="highlight=='自助打印区'">
                                <image style="top:35.2%;left:47.8%;width:9.2%;height: 3.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/zizhudayin.png'></image>
                            </view>
                            <view v-if="highlight=='休息区'">
                                <image style="top:25.2%;left:54.5%;width: 9.5%;height:5.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/xiuxiqu.png'></image>
                                <image style="top:33.2%;left:47.8%;width:9.2%;height: 2.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/xiuxiqu2.png'></image>
                                <image style="top:33.3%;left:74.7%;width: 5.7%;height:8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/xiuxiqu3.png'></image>
                                <image style="top:61.5%;left:55.1%;width: 7.1%;height:8.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/xiuxiqu4.png'></image>
                            </view>
                            <view v-if="highlight=='服务台'">
                                <image style="top:38.1%;left:58%;width: 8.3%;height:4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/fuwutai.png'></image>
                            </view>
                            <view v-if="highlight=='银行'">
                                <image style="top:65.5%;left:27.4%;width:2.2%;height: 2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/yinghang.png'></image>
                            </view>
                            <view v-if="highlight=='医保'">
                                <image style="top:18.5%;left:47.1%;width:1.6%;height:1.9%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/yibao.png'></image>
                            </view>
                            <view v-if="highlight=='长护'">
                                <image style="top:16.7%;left: 47.1%;width:1.6%;height:1.9%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/changhu.png'></image>
                            </view>
                            <view v-if="highlight=='人设综合'">
                                <image style="top:22.3%;left:47.1%;width:1.6%;height: 1.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/renshe.png'></image>
                                <image style="top:20.3%;left:47.1%;width:1.6%;height: 2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/renshe1.png'></image>
                                <image style="top: 26.1%;left:47.1%;width:1.6%;height:1.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/renshe.png'></image>
                                <image style="top:24.2%;left:47.1%;width:1.6%;height: 2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/renshe1.png'></image>
                            </view>
                            <view v-if="highlight=='母婴室'">
                                <image style="top:60%;left:15.7%;width: 5.1%;height:6.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/muying.png'></image>
                            </view>
                            <view v-if="highlight=='税务'">
                                <image style="top:25.5%;left:43.6%;width: 1.8%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/shuiwu.png'></image>
                                <image style="top:25.5%;left:45.4%;width: 1.7%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/shuiwu1.png'></image>
                            </view>
                            <view v-if="highlight=='企业服务'">
                                <image style="top:65.6%;left: 37.1%;width:1.9%;height:2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/qiyefuwu.png'></image>
                                <image style="top:65.6%;left: 39%;width:1.9%;height:2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/qiyefuwu2.png'></image>
                                <image style="top:65.6%;left: 40.9%;width:1.9%;height:2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/qiyefuwu.png'></image>
                                <image style="top:65.6%;left:35.1%;width:1.9%;height: 2.8%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/qiyefuwu2.png'></image>
                            </view>
                            <view v-if="highlight=='民生综合'">
                                <image style="top:25.5%;left: 37.3%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/minsheng.png'></image>
                                <image style="top:25.5%;left: 35.6%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/minsheng2.png'></image>
                                <image style="top:25.5%;left: 33.9%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/minsheng.png'></image>
                            </view>
                            <view v-if="highlight=='刻章'">
                                <image style="top:25.5%;left:40.5%;width: 1.7%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kezhang1.png'></image>
                                <image style="top:65.5%;left:25.5%;width:2.2%;height: 2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/kezhang2.png'></image>
                            </view>
                            <view v-if="highlight=='工改综合'">
                                <image style="top:25.5%;left: 32.3%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/gonggai.png'></image>
                            </view>
                            <view v-if="highlight=='高效办成一件事不成事反应'">
                                <image style="top: 25.5%;left:38.9%;width:1.8%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/gaoxiao.png'></image>
                            </view>
                            <view v-if="highlight=='档案'">
                                <image style="top:25.5%;left: 29.0%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/dangan.png'></image>
                            </view>
                            <view v-if="highlight=='一窗出证'">
                                <image style="top:25.5%;left: 30.7%;width:1.9%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/chuzheng.png'></image>
                            </view>
                        </view>

                        <view v-if="current==1">
                            <image style="top:0;left:0;width:100%;height:100%; z-index: 0;"
                                src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/secondFloorImg.jpg'></image>

                            <view v-if="highlight=='民政'">
                                <image style="top:66.8%;left:16.6%;width: 2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/minzheng.png'></image>
                            </view>
                            <view v-if="highlight=='残联'">
                                <image style="top:66.8%;left: 18.4%;width:2.2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/canlian.png'></image>
                            </view>
                            <view v-if="highlight=='应急管理'">
                                <image style="top:66.8%;left:20.3%;width: 2.2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/yingji.png'></image>
                            </view>
                            <view v-if="highlight=='城管'">
                                <image style="top:66.8%;left:22.3%;width: 2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/chengguan.png'></image>
                            </view>
                            <view v-if="highlight=='城管牌匾报件'">
                                <image style="top:66.8%;left:24.2%;width: 2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/paibian.png'></image>
                            </view>
                            <view v-if="highlight=='潮汐'">
                                <image style="top:66.8%;left:26.1%;width: 2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/chaoxi.png'></image>
                            </view>
                            <view v-if="highlight=='公证处'">
                                <image style="top:66.8%;left: 28.0%;width:1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongzheng.png'></image>
                            </view>
                            <view v-if="highlight=='卫健委'">
                                <image style="top:66.8%;left: 30.0%;width:1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/weijianwei.png'></image>
                            </view>
                            <view v-if="highlight=='公安'">
                                <image style="top:66.8%;left: 33.7%;width:1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan1.png'></image>
                                <image style="top:66.8%;left: 31.8%;width:2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan2.png'></image>
                                <image style="top:66.8%;left:43.2%;width: 2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan2.png'></image>
                                <image style="top:66.8%;left: 41.3%;width:1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan3.png'></image>
                                <image style="top: 71.9%;left:43.2%;width:2%;height:2.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan2.png'></image>
                                <image style="top:74.4%;left: 43.2%;width:2%;height:2.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan3.png'></image>
                                <image style="top:69.6%;left:43.2%;width:2%;height: 2.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan3.png'></image>
                                <image style="top:66.8%;left: 37.6%;width:1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongan3.png'></image>
                            </view>
                            <view v-if="highlight=='公安综合业务'">
                                <image style="top:66.8%;left:39.5%;width: 1.9%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gonganzonghe1.png'></image>
                                <image style="top:76.9%;left:43.1%;width:2%;height: 2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gonganzonghe2.png'></image>
                                <image style="top:66.8%;left: 35.6%;width:2%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gonganzonghe1.png'></image>
                            </view>

                            <!--                              -->
                            <view v-if="highlight=='步梯'">
                                <image style="top:80.3%;left:39.8%;width: 7.9%;height:4.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/buti1.png'></image>
                                <image style="top:17.9%;left: 68.1%;width:3.4%;height:6.3%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/buti2.png'></image>
                                <image style="top: 52.6%;left:33.9%;width:3.4%;height:5.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/buti3.png'></image>
                                <image style="top:35.265%;left:33.3%;width:5.1%;height: 2.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/buti4.png'></image>
                                <image style="top:34.6%;left:52.6%;width: 16.2%;height:4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/buti5.png'></image>
                            </view>
                            <view v-if="highlight=='电梯'">
                                <image style="top:41.5%;left:35.3%;width:2.9%;height: 3.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti1.png'></image>
                                <image style="top:41.5%;left: 32.2%;width:2.9%;height:3.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti1.png'></image>
                                <image style="top:16.7%;left:56.8%;width:2.3%;height: 1.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti2.png'></image>
                                <image style="top:19.1%;left: 56.9%;width:2.3%;height:1.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti2.png'></image>
                                <image style="top:48.7%;left:35.0%;width:2.9%;height: 2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti3.png'></image>
                                <image style="top:48.7%;left: 31.8%;width:2.9%;height:2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/dianti3.png'></image>
                            </view>
                            <view v-if="highlight=='休息区'">
                                <image style="top:26.265%;left:71.8%;width:1.6%;height: 6.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu1.png'></image>
                                <image style="top:24.9%;left:50.0%;width: 0.9%;height:6.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu2.png'></image>
                                <image style="top:26.5%;left:68.2%;width:1.4%;height: 5.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu3.png'></image>
                                <image style="top:23.265%;left:32.0%;width: 1.1%;height:5.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu4.png'></image>
                                <image style="top:24.7%;left:41.2%;width:1%;height: 8.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu5.png'></image>
                                <image style="top:32.2%;left:32.7%;width:9.2%;height: 1.9%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu6.png'></image>
                                <image style="top:40.265%;left:52.7%;width: 16.4%;height:2.7%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu7.png'></image>
                                <image style="top:58.9%;left:29.5%;width:11.9%;height: 5.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu8.png'></image>
                                <image style="top:49.0%;left:49.5%;width: 1.7%;height:14.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xiuxiqu9.png'></image>
                            </view>
                            <view v-if="highlight=='卫生间'">
                                <image style="top:16.265%;left: 33.6%;width:3.8%;height:2.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/weishengjian.png'></image>
                                <image style="top:19.265%;left:29.5%;width: 3.9%;height:2.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nvce1.png'></image>
                                <image style="top:38.265%;left:35%;width:3.4%;height: 2.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nvce2.png'></image>
                                <image style="top:16.265%;left:29.7%;width: 3.8%;height:2.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nance1.png'></image>
                                <image style="top:41.265%;left:38.3%;width:3.4%;height: 2.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nance2.png'></image>
                            </view>
                            <view v-if="highlight=='空调机房'">
                                <image style="top:72.6%;left:17.9%;width: 11.6%;height:12.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/kongtiaojifang1.png'></image>
                                <image style="top:16.265%;left: 56.8%;width:11.3%;height:9.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/kongtiaojifang2.png'></image>
                            </view>

                            <!--   -->
                            <view v-if="highlight=='出入境办理服务'">
                                <image style="top:72.265%;left:51.6%;width:2.3%;height: 6.9%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/churujing.png'></image>
                            </view>
                            <view v-if="highlight=='档案室密集架'">
                                <image style="top:24.0%;left:32.8%;width:7.8%;height: 7.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/danganshi.png'></image>
                            </view>
                            <view v-if="highlight=='更衣室'">
                                <image style="top:72.1%;left:29.0%;width: 5.4%;height:12.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gengyishi.png'></image>
                            </view>
                            <view v-if="highlight=='功能室'">
                                <image style="top:29.265%;left:20.8%;width:11.8%;height: 3.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/gongnengshi.png'></image>
                            </view>
                            <view v-if="highlight=='婚姻登记'">
                                <image style="top:18.1%;left:41.6%;width: 9.2%;height:4.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/hunyindengji.png'></image>
                            </view>
                            <view v-if="highlight=='婚姻家庭辅导室'">
                                <image style="top:26.4%;left:73.3%;width: 5.6%;height:5.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/hunyinjiating.png'></image>
                            </view>
                            <view v-if="highlight=='婚姻登记自助机'">
                                <image style="top:57.2%;left:42%;width:1.2%;height: 3.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/hunyinzhaoxiang.png'></image>
                            </view>
                            <view v-if="highlight=='检验室'">
                                <image style="top:22.1%;left:21.1%;width: 8.4%;height:6.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/jianyanshi.png'></image>
                            </view>
                            <view v-if="highlight=='驾驶人体检自助机'">
                                <image style="top:55.2%;left: 42%;width:1.2%;height:3.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/jiashitijian1.png'></image>
                            </view>
                            <view v-if="highlight=='驾驶员体检照相自助机'">
                                <image style="top:60.0%;left:41.9%;width:1.2%;height: 3.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/jiashitijian2.png'></image>
                            </view>
                            <view v-if="highlight=='居住证制证室'">
                                <image style="top:80.1%;left:50.4%;width: 8.6%;height:4.4%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/juzhuzheng.png'></image>
                            </view>
                            <view v-if="highlight=='离婚登记室'">
                                <image style="top:32.265%;left: 73.4%;width:4.8%;height:8.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/lihun.png'></image>
                            </view>
                            <view v-if="highlight=='婚检'">
                                <image style="top:24.0%;left:26.9%;width: 2.7%;height:2.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nanhunjian.png'></image>
                                <image style="top:24.0%;left: 24.3%;width:2.7%;height:2.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/nvhunjian.png'></image>
                            </view>
                            <view v-if="highlight=='拍照区'">
                                <image style="top:72.1%;left:54%;width: 7.6%;height:7.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/paizhao.png'></image>
                            </view>
                            <view v-if="highlight=='物业办公室'">
                                <image style="top:17.8%;left:71.4%;width: 4.1%;height:8.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/wuye.png'></image>
                            </view>
                            <view v-if="highlight=='宣传长廊'">
                                <image style="top:16.3%;left:51.0%;width: 5.7%;height:9.6%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xuanchuan.png'></image>
                            </view>
                            <view v-if="highlight=='宣誓大厅'">
                                <image style="top:26.4%;left:51.0%;width:8.6%;height: 5.1%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xuanshi1.png'></image>
                                <image style="top:26.5%;left: 59.6%;width:8.8%;height:5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/xuanshi2.png'></image>
                            </view>
                            <view v-if="highlight=='文印资料室'">
                                <image style="top:32.265%;left:77.8%;width: 4.8%;height:8.5%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/ziliaoshi1.png'></image>
                                <image style="top:16.265%;left:41.7%;width:9%;height:1.2%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/ziliaoshi2.png'></image>
                            </view>
                            <view v-if="highlight=='咨询办公室'">
                                <image style="top:16.265%;left:37.4%;width:4.2%;height: 7.0%;"
                                    src='https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/secondFloor/zixun.png'></image>
                            </view>
                        </view>
                    </view>

                </movable-view>
            </movable-area>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchValue:'',
            x: -150,
            y: -550,
            scale: 1,
            old: {
                x: -150,
                y: -400,
                scale: 1
            },
            org: {
                x: -150,
                y: -400,
                scale: 1
            },
            flootList: [{
                value: 1,
                label: '2F'
            }, {
                value: 0,
                label: '1F'
            }],
            current: 0,
            activeColor: '#007aff',
            styleType: 'button',
            highlight: '',
            tapBox: [
                [
                    {
                        name: '企业开办专区',
                        childList: [
                            {
                                name: '潮汐',
                                x: -60,
                                y: -500,
                                icon: 't-icon-yj'
                            },
                            {
                                name: '数据要素综合服务',
                                icon: 't-icon-jichuziduan-guanlianbiao'
                            },
                            {
                                name: '不动产',
                                icon: 't-icon-budongchanfuwu'
                            },
                            {
                                name: '科技综合服务',
                                icon: 't-icon-mv-kadjf'
                            },
                            {
                                name: '银行',
                                icon: 't-icon-yinhangqia'
                            },
                            {
                                name: '企业服务',
                                icon: 't-icon-qiyefuwu'
                            },
                            {
                                name: '刻章',
                                icon: 't-icon-gongankezhang'
                            }
                        ]
                    },
                    {
                        name: '民生开办专区',
                        childList: [
                            {
                                name: '诚信建设投诉',
                                icon: 't-icon-peoplebank'
                            },
                            {
                                name: '医保',
                                icon: 't-icon-yibaogouxian'
                            },
                            {
                                name: '长护',
                                icon: 't-icon-hunjian'
                            },
                            {
                                name: '人设综合',
                                icon: 't-icon-zy_minzheng_nor'
                            },
                            {
                                name: '税务',
                                icon: 't-icon-shuiwu'
                            },
                            {
                                name: '民生综合',
                                icon: 't-icon-bianminshenghuo'
                            },
                            {
                                name: '工改综合',
                                icon: 't-icon-rengonggaipei'
                            },
                            {
                                name: '高效办成一件事不成事反应',
                                icon: 't-icon--s-minzheng'
                            },
                            {
                                name: '档案',
                                icon: 't-icon-danganshiguanli'
                            },
                            {
                                name: '一窗出证',
                                icon: 't-icon-tonghangzhengshenqing'
                            },

                        ]
                    },
                    {
                        name: '其他',
                        childList: [
                            {
                                name: '电梯',
                                icon: 't-icon-huahua_dianti'
                            },
                            {
                                name: '步梯',
                                icon: 't-icon-buti'
                            },
                            {
                                name: '卫生间',
                                icon: 't-icon-weishengjian'
                            },
                            {
                                name: '24小时自助服务',
                                icon: 't-icon-xiaoshireshui'
                            },
                            {
                                name: '空调机房',
                                icon: 't-icon-kongtiaojifang'
                            },
                            {
                                name: '更衣休息室',
                                icon: 't-icon-nangengyishi'
                            },
                            {
                                name: '咖啡区',
                                icon: 't-icon-kafei_xuanzhong'
                            },
                            {
                                name: '自助打印区',
                                icon: 't-icon-dayinji'
                            },
                            {
                                name: '休息区',
                                icon: 't-icon-yingyuanxinxixiuxiqu_active-copy'
                            },
                            {
                                name: '服务台',
                                icon: 't-icon-reception'
                            },
                            {
                                name: '母婴室',
                                icon: 't-icon-muyingshi'
                            },
                        ]
                    },
                ],
                [
                    {
                        name: '公安/工改窗口',
                        childList: [
                            {
                                name: '民政',
                                icon: 't-icon--s-minzheng'
                            },
                            {
                                name: '残联',
                                icon: 't-icon-canlian'
                            },
                            {
                                name: '应急管理',
                                icon: 't-icon-zhongwuranyingji'
                            },
                            {
                                name: '城管',
                                icon: 't-icon-chengguanju'
                            },
                            {
                                name: '城管牌匾报件',
                                icon: 't-icon-s-paibianbiaoshi'
                            },
                            {
                                name: '潮汐',
                                icon: 't-icon-chaoxi'
                            },
                            {
                                name: '公证处',
                                icon: 't-icon-gongzhengchuchaxun-01'
                            },
                            {
                                name: '卫健委',
                                icon: 't-icon-weijianwei-'
                            },
                            {
                                name: '公安',
                                icon: 't-icon-gonganjiguan'
                            },
                            {
                                name: '公安综合业务',
                                icon: 't-icon-biaoqian_gongan'
                            },

                        ]
                    },
                    {
                        name: '其他',
                        childList: [
                            {
                                name: '步梯',
                                icon: 't-icon-buti'
                            },
                            {
                                name: '电梯',
                                icon: 't-icon-huahua_dianti'
                            },
                            {
                                name: '休息区',
                                icon: 't-icon-yingyuanxinxixiuxiqu_active-copy'
                            },
                            {
                                name: '卫生间',
                                icon: 't-icon-weishengjian'
                            },
                            {
                                name: '空调机房',
                                icon: 't-icon-kongtiaojifang'
                            },
                        ]
                    },
                    {
                        name: '其他',
                        childList: [
                            {
                                name: '出入境办理服务',
                                icon: 't-icon-churujing'
                            },
                            // {
                            //     name: '档案室',
                            //     icon: 't-icon-ziliaoshi'
                            // },
                            {
                                name: '更衣室',
                                icon: 't-icon-nangengyishi'
                            },
                            {
                                name: '功能室',
                                icon: 't-icon-gongnengshi'
                            },
                            {
                                name: '婚姻登记',
                                icon: 't-icon-yuyuehunyindengji'
                            },
                            {
                                name: '婚姻家庭辅导室',
                                icon: 't-icon-icon-test'
                            },
                            {
                                name: '婚姻登记自助机',
                                icon: 't-icon-zizhuji'
                            },
                            {
                                name: '检验室',
                                icon: 't-icon-kejijiaoyu'
                            },
                            {
                                name: '驾驶人体检自助机',
                                icon: 't-icon-icon-tijianguanli-weixuanze'
                            },
                            {
                                name: '驾驶员体检照相自助机',
                                icon: 't-icon-iconset0240'
                            },
                            {
                                name: '居住证制证室',
                                icon: 't-icon-tonghangzhengshenqing'
                            },
                            {
                                name: '离婚登记室',
                                icon: 't-icon-lihundengjiyuyue'
                            },
                            {
                                name: '婚检',
                                icon: 't-icon-briefcase'
                            },
                            {
                                name: '拍照区',
                                icon: 't-icon-iconset0240'
                            },
                            {
                                name: '物业办公室',
                                icon: 't-icon-wuye'
                            },
                            {
                                name: '宣传长廊',
                                icon: 't-icon-dangzhengxuanchuan'
                            },
                            {
                                name: '宣誓大厅',
                                icon: 't-icon-yj'
                            },
                            {
                                name: '文印资料室',
                                icon: 't-icon-danganshiguanli'
                            },
                            {
                                name: '咨询办公室',
                                icon: 't-icon-ic_man'
                            },
                        ]
                    }
                ]
            ]
        }
    },
    methods: {
        changeSearchValue(value) {
            console.log(value);
        },
        changeCurrent(value) {
            this.current = value
        },
        clicktab(e) {
            if (this.highlight != e.name) {
                this.highlight = e.name
                // 解决view层不同步的问题
                // let differenceScale=(this.old.scale-this.org.scale)==0?1:this.old.scale-this.org.scale
                // this.x = (this.old.scale-this.org.scale)==0?e.x:(e.x*(differenceScale+differenceScale)+(-200))
                // this.y = (this.old.scale-this.org.scale)==0?e.y:(e.y*(differenceScale+differenceScale)+(-370))
                // this.scale = 1


                // setTimeout(() => {
                // this.$nextTick(function () {
                //     this.x = -150
                //     this.y = -400
                // })
                // },0)
                // setTimeout(() => {
                // this.$nextTick(function () {
                //     this.scale = 1
                // })
                // },100)
                // setTimeout(() => {
                //     this.$nextTick(function () {
                //         this.x = e.x
                //         this.y = e.y
                //     })
                // }, 1000)
                // setTimeout(() => {
                //     this.scale = 2
                //     this.$nextTick(function () {
                //         this.scale = 2
                //     })
                // }, 1200)
            }
            else {
                this.highlight = ''
            }

        },
        tap: function (e) {
            // 解决view层不同步的问题
            this.x = this.old.x
            this.y = this.old.y
            this.$nextTick(function () {
                this.x = 30
                this.y = 30
            })
        },
        tap2(value) {
            // 解决view层不同步的问题
            this.scale = this.old.scale
            this.scale = this.old.scale
            this.$nextTick(function () {
                this.scale = value
            })
        },
        onChange: function (e) {
            this.old.x = e.detail.x
            this.old.y = e.detail.y
        },
        onScale: function (e) {
            this.old.scale = e.detail.scale
        },
        onClickItem(e) {
            console.log(e.currentIndex)
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex
                this.highlight = ''

            }
        },
        handleTap(event) {
            console.log(event);
            return
            // 获取元素的位置和尺寸信息
            const rect = this.$refs['mapImgBpx'].getBoundingClientRect();
            // 获取触点相对于元素的位置
            const x = event.touches[0].clientX;
            const y = event.touches[0].clientY;

            // 判断点击高度
            if (y > rect.top && y < rect.bottom) {
                console.log('点击在有效高度范围内');
                // 执行相应操作
            } else {
                console.log('点击在无效高度范围外');
            }
        }
    }
}
</script>


<style lang="scss" scoped>
.mapPage {
    height: 100vh;
    background-color: #F6F7F9;
    .titleBox {
        height: 10vh;
        width: 100vw;
        position: absolute;
        z-index: 100;
        .segmentedBox {
            // height: 10vh;
            // display: flex;
            // align-items: center;
            // width: 100%;
            background-color: #fff;
            position: fixed;
            bottom: 22vh;
            left: 20rpx;
            border-radius: 10rpx;
            font-size: 24rpx;
            overflow: hidden;
            view {
                padding: 20rpx;
            }
            .active {
                color: #fff;
                background-color: #007aff;
            }
        }
        .bottom-view {
            padding: 20rpx;
            background-color: #fff;
            height: 18vh;
            overflow-y: scroll;
            width: calc(100% - 40rpx);
            position: fixed;
            bottom: 0;
            background-color: #fff;
            /* 自定义滚动条样式 */
            .scroll-view::-webkit-scrollbar {
                width: 10px; /* 设置滚动条宽度 */
            }
            .scroll-view::-webkit-scrollbar-track {
                background-color: #f1f1f1; /* 滚动条轨道颜色 */
            }
            .scroll-view::-webkit-scrollbar-thumb {
                background-color: #888; /* 滚动条颜色 */
            }
            .scroll-view::-webkit-scrollbar-thumb:hover {
                background-color: #555; /* 滚动条hover颜色 */
            }
            .scroll-view {
                padding: 0rpx 20rpx 20rpx 20rpx;
                // view {
                //     padding: 10rpx 20rpx;
                //     float: left;
                // }
                .tapItemBox {
                    // overflow: hidden;
                    font-size: 28rpx;
                    padding: 30rpx 0rpx 30rpx 0rpx;
                    // border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
                    border-radius: 5rpx;
                    display: flex;
                    // view {
                    //     display: flex;
                    // }
                    .tapItem {
                        background-color: rgba(255, 255, 255, 0.9);
                        padding: 5rpx 0rpx;
                        margin: 10rpx 10rpx 0 0;
                        text-align: center;
                        font-size: 24rpx;
                        .iconfont {
                            width: 60rpx;
                            height: 60rpx;
                            text-align: center;
                            margin: 0 auto;
                        }
                        .name {
                            white-space: nowrap;
                            text-align: center;
                            margin-top: 20rpx;
                            width: 120rpx;
                            white-space: nowrap; /* 不换行 */
                            overflow: hidden; /* 超出部分隐藏 */
                            text-overflow: ellipsis; /* 使用省略符号 */
                        }
                    }
                    .tabNameActive {
                        background-color: #e0efff;
                        // background-image: linear-gradient(
                        //     to bottom,
                        //     rgba(255, 255, 255, 0.459) 0rpx,
                        //     #b9d9fc 100rpx
                        // );
                        border-radius: 10rpx;
                        // color: #fff;
                    }
                }
            }
        }

        ::v-deep.segmented-control {
            background-color: #fff;
            border-radius: 10rpx;
        }
    }
    .masking {
        background-color: rgba(0, 0, 0, 0.5);
        width: 400vw;
        height: 400vh;
        position: fixed;
        top: 0;

        z-index: 5;
    }
    .mapBox {
        height: 100vh;
        movable-view {
            padding-top: 20vh;
            display: flex;
            align-items: center;
            justify-content: center;

            width: 200%;
            height: 200%;
            // background-color: #007aff;
            color: #fff;
        }

        movable-area {
            height: 100%;
            width: 100%;
            // background-color: #d8d8d8;
            overflow: hidden;
        }

        .max {
            width: 500rpx;
            height: 500rpx;
        }
        .mapImgBpx {
            position: relative;
            width: 100%;
            height: 140vw;
            // background-color: #434343;
            // background-image: url("https://lgqj.oss-cn-beijing.aliyuncs.com/2024/11/zwdtMap/firstFloor/firstFloor.jpg");
            // background-size: 100%;
            // background-repeat: no-repeat;
            image {
                position: absolute;
                z-index: 10;
                width: 400%;

                // transform: translate3d(0, 0, 0) scale(0.25, 0.25);

                // transform-origin: left top;
            }
        }
    }
}
</style>